import type { IColumnsOption } from 'vc';
import { CellRenderMap, INDEX, COMPANY_NAME, BUSINESS_DATA, REGISTERED_CAPITAL, PROVINCE, CITY, COUNTRY, INDUSTRY_CATEGORY, INFO_SOURCE } from '@/utils/tableColumn';

export function useTable() {
  const columns = ref<IColumnsOption[]>([
    { ...INDEX },
    { ...COMPANY_NAME },
    {
      field: 'registrationNumber',
      title: '登记编号',
      width: 230,
      sortable: true,
      sortBy: 'registrationNumber',
      cellRender: {
        name: CellRenderMap.HighLight
      }
    },
    {
      title: '登记时间',
      field: 'registrationDate',
      width: 110,
      align: 'center',
      sortable: true,
      sortBy: 'registrationDate'
    },
    {
      field: 'periodOfValidityStartDate',
      title: '有效期限',
      width: 210,
      align: 'center',
      sortable: true,
      sortBy: 'periodOfValidityStartDate',
      formatter: ({ row }) => {
        return `${row?.periodOfValidityStartDate} 至 ${row?.periodOfValidityExpirationDate}`;
      }
    },
    {
      field: 'topChangeTypeCode',
      title: '登记类型',
      width: 120,
      sortBy: 'topChangeTypeCode',
      align: 'center',
      slots: {
        default: ({ row }) => {
          if (row.changes?.length || row.changeType) {
            let c: any = '';
            if (row.changes?.length) {
              c = <a onClick={() => openDetailChanges(row.changes)}>查看变更{row.changes.length}</a>;
            }
            return (
              <div>
                {row.changeType} {c}
              </div>
            );
          }
          return '-';
        }
      }
    },
    {
      ...INFO_SOURCE(''),
      title: '登记回执'
    },
    {
      minWidth: 270,
      field: 'productionSite',
      title: '生产经营场所',
      showOverflow: 'title'
    },
    { ...PROVINCE },
    { ...CITY },
    { ...COUNTRY },
    { ...INDUSTRY_CATEGORY },
    { ...BUSINESS_DATA },
    { ...REGISTERED_CAPITAL }
  ]);

  const detailChangesColumn = ref<IColumnsOption[]>([
    { field: 'registrationNumber', align: 'center', title: '登记编号',minWidth:200  },
    { field: 'changeType', align: 'center', title: '登记类型', width: 100 },
    { field: 'version', align: 'center', title: '版本', width: 100 },
    { field: 'registrationDate', align: 'center', title: '登记日期', width: 100 },
    {
      align: 'center',
      title: '有效期限',
      width: 200,
      formatter: ({ row }) => {
        return `${row?.periodOfValidityStartDate ?? '-'} 至 ${row?.periodOfValidityExpirationDate ?? '-'}`;
      }
    }
  ]);

  // 变更弹窗
  const showDialog = ref(false);
  const detailChanges = ref([]);

  const openDetailChanges = (data) => {
    showDialog.value = true;
    detailChanges.value = data;
  };

  return {
    columns,
    detailChangesColumn,
    showDialog,
    detailChanges
  };
}
